<template>
  <Card class="business-management">
    <div slot="title" class="clearfix">
      <Select v-model="currentClass" @on-change="changeClassList" class="DS_search">
        <Option v-for="item in classList" :key="item.key" :value="item.key">{{ item.name }}</Option>
      </Select>
      <Button class="add-btn" type="primary" @click="addClassBtn">新建</Button>
    </div>
    <Tree :data="treeDataMap.children" :empty-text="emptyTxt" :render="renderContent" @on-select-change="checkNode"></Tree>
    <!-- 新建规则modal框 -->
    <Modal
      class="add-enum-modal"
      v-model="addModalShow"
      :title="currentOption === 'create' ? '新建数据' : '编辑数据'"
      :closable="false"
      :mask-closable="false"
      :transfer="false"
      >
      <Form
        class="create-enum-form"
        ref="dictTypeForm"
        :model="dictTypeForm"
        :rules="dictTypeFormRules"
        label-position="left"
        :label-width="100"
        >
        <FormItem label="名称" prop="dictName">
          <Input v-model="dictTypeForm.dictName" placeholder="请输入名称"></Input>
        </FormItem>
        <FormItem label="备注" prop="description">
          <Input v-model="dictTypeForm.description" type="textarea" :rows="4" placeholder="请输入备注"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="handleCancel">取消</Button>
        <Button type="primary" @click="handleOk">确定</Button>
      </div>
    </Modal>
  </Card>
</template>

<script>
import { queryDictByKeyApi, createDictNodeApi, updateDictNodeApi, deleteDictNodeApi } from '@/api/business-type'
import { addProp, showMessageTip } from '@/libs/util'
export default {
  name: 'business_management',
  data () {
    return {
      currentClass: 'businessType',
      classList: [{
        key: 'businessType',
        name: '业务分类'
      }, {
        key: 'dataType',
        name: '数据分类'
      }, {
        key: 'methodType',
        name: '方法分类'
      }, {
        key: 'ruleType',
        name: '规则分类'
      }],
      treeDataMap: {},
      // 点击新增、编辑时赋值的节点信息
      currentNode: {},
      // 'create'标识新建、'edit'标识编辑
      currentOption: '',
      emptyTxt: '未查询到数据',
      // 新增modal相关
      addModalShow: false,
      dictTypeForm: {
        dictName: '',
        description: ''
      },
      dictTypeFormRules: {
        dictName: [{
          required: true,
          message: '名称不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
  },
  methods: {
    changeClassList (value) {
      this.getTreeData(value)
    },
    // 新建按钮
    addClassBtn () {
      this.currentOption = 'create'
      this.resetForm(this.treeDataMap.dictId)
    },
    // 初始化表单 赋值parentId
    resetForm (parentId) {
      this.$refs.dictTypeForm.resetFields()
      this.dictTypeForm = {
        dictKey: '',
        dictName: '',
        description: '',
        parentId
      }
      this.addModalShow = true
    },
    // 新增数据
    addNewData () {
      const params = this.dictTypeForm
      params.dictKey = params.dictName
      createDictNodeApi(params).then((res) => {
        showMessageTip(this, res.data.code, '新建成功', res.data.msg || '新建失败，请重试')
        if (res.data.code === 2000) {
          this.getTreeData(this.currentClass)
          this.addModalShow = false
        }
      })
    },
    // 编辑更新节点数据
    updateNodeData () {
      const data = this.dictTypeForm
      data.dictKey = data.dictName
      const params = {
        dictId: data.dictId
      }
      updateDictNodeApi(params, data).then((res) => {
        showMessageTip(this, res.data.code, '更新成功', res.data.msg || '更新失败，请重试')
        if (res.data.code === 2000) {
          this.getTreeData(this.currentClass)
          this.addModalShow = false
        }
      })
    },
    // 获取数据
    getTreeData (dictKey) {
      this.treeDataMap.children = []
      this.emptyTxt = '加载中...'
      const params = {
        dictKey
      }
      queryDictByKeyApi(params).then((res) => {
        if (res.data.code === 2000) {
          this.treeDataMap = res.data.data
          if (this.treeDataMap.children && this.treeDataMap.children.length > 0) {
            this.treeDataMap.children = addProp(this.treeDataMap.children)
          } else {
            this.emptyTxt = '未查询到数据'
          }
        } else {
          this.$Message.error({
            content: res.data.msg || '加载失败，请重试',
            duration: 4
          })
        }
      })
    },
    // 自定义渲染树节点
    renderContent (h, { root, node, data }) {
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%'
        }
      }, [
        h('span', [
          h('span', data.dictName)
        ]),
        h('span', {
          style: {
            display: 'inline-block',
            float: 'right',
            marginRight: '32px'
          }
        }, [
          h('a', {
            on: {
              click: () => {
                this.createNextLevel(data)
              }
            }
          }, '创建下一级'),
          h('Divider', {
            props: {type: 'vertical'}
          }),
          // h('a', {
          //   on: {
          //     click: () => {
          //       this.viewDetail(root, node, data)
          //     }
          //   }
          // }, '查看详情'),
          // h('Divider', {
          //   props: {type: 'vertical'}
          // }),
          h('a', {
            on: {
              click: () => {
                this.editNode(data)
              }
            }
          }, '编辑'),
          h('Divider', {
            props: {type: 'vertical'}
          }),
          h('a', {
            style: {
              color: 'red'
            },
            on: {
              click: () => {
                this.deleteNode(data)
              }
            }
          }, '删除')
        ])
      ])
    },
    /**
     * 创建下一级
     */
    createNextLevel (data) {
      this.currentOption = 'create'
      this.resetForm(data.dictId)
    },
    /**
     * 查看节点详情
     */
    viewDetail () {

    },
    /**
     * 编辑节点信息
     */
    editNode (data) {
      this.$refs.dictTypeForm.resetFields()
      this.currentOption = 'edit'
      const { dictId, dictKey, dictName, description, parentId } = data
      this.dictTypeForm = { dictId, dictKey, dictName, description, parentId }
      this.addModalShow = true
    },
    /**
     * 删除节点
      */
    deleteNode (data) {
      this.$Modal.confirm({
        title: '删除分类',
        content: '<p>确定删除此分类？</p>',
        onOk: () => {
          const params = {
            dictId: data.dictId
          }
          deleteDictNodeApi(params).then((res) => {
            showMessageTip(this, res.data.code, '删除成功', res.data.msg || '删除失败，请重试')
            if (res.data.code === 2000) this.getTreeData(this.currentClass)
          })
        }
      })
    },
    // 点击树节点事件
    checkNode (row) {

    },
    // modal框取消按钮
    handleCancel () {
      this.addModalShow = false
    },
    // modal框确定按钮
    handleOk () {
      this.$refs.dictTypeForm.validate((valid) => {
        if (this.currentOption === 'create') {
          this.addNewData()
        } else {
          this.updateNodeData()
        }
      })
    }
  },
  activated () {
  },
  mounted () {
    this.getTreeData(this.currentClass)
  }
}
</script>

<style lang="less">
  .business-management {
    .add-btn {
      float: right;
    }
  }
</style>
